<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
  <%--<meta charset="UTF-8">--%>
  <title>登录到我的秘密花园</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="${pageContext.request.contextPath}/statics/css/login/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="${pageContext.request.contextPath}/statics/css/login/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="${pageContext.request.contextPath}/statics/css/login/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
  <link href="${pageContext.request.contextPath}/statics/css/login/templatemo_style.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/login/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/login/bootstrap.min.js"></script>
</head>
<body class="templatemo-bg-gray">
<div class="container">
  <div class="col-md-12">
    <h1 class="margin-bottom-15">登 录 我 的 秘 密 花 园</h1>
    <form class="form-horizontal templatemo-container templatemo-login-form-1 margin-bottom-30" action="#" method="post">

      <div class="form-group">
        <div class="col-md-2">
          <div class="control-wrapper">
            <label class="control-label fa-label">账号</label><span style="color:red">*</span>
          </div>
        </div>
        <div class="col-md-10">
          <div class="control-wrapper">
            <label for="account" class="control-label fa-label"><i class="fa fa-user"></i></label>
            <input class="form-control" maxlength="20" onkeyup="value=value.replace(/[^a-zA-Z0-9_]/g,'')" id="account" placeholder="8-20位的字母,数字或者下划线" name="account" required>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-md-2">
          <div class="control-wrapper">
            <label class="control-label fa-label">密码</label><span style="color:red">*</span>
          </div>
        </div>
        <div class="col-md-10">
          <div class="control-wrapper">
            <label for="password" class="control-label fa-label"><i class="fa fa-lock"></i></label>
            <input type="password" maxlength="20" class="form-control" onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')" id="password" placeholder="8-20位的字母,数字或者下划线" name="password" required>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-md-12">
          <div class="checkbox control-wrapper">
            <label>
              <input type="checkbox"> 记住我的账号
            </label>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-md-12">
          <div class="control-wrapper">
            <input type="button" id="login" value="登 录" class="btn btn-info">
            <a href="#" class="text-right pull-right">忘记密码?</a>
          </div>
        </div>
      </div>

      <hr>
    </form>
    <div class="text-center">
      <a href="${pageContext.request.contextPath}/registerPage" class="templatemo-create-new">没有账号 ? 注册一个 !<i class="fa fa-arrow-circle-o-right"></i></a>
    </div>
  </div>
</div>
<script>
  //执行登录
  $("#login").click(function(){
    var account = $("#account").val();
    var password = $("#password").val();
    $.ajax({
      type: "POST",
      url: "${pageContext.request.contextPath}/loginRequest",   //请求URL地址
      dataType: "text",                                         //服务器返回数据类型
      cache:false,                                              //防止浏览器使用缓存,一般针对IE
      data: {account: account, password: password},             //请求参数
      success: function(data){
        if(data === "ok"){
          window.location.href="${pageContext.request.contextPath}/indexPage";
        } else {
          alert(data);
        }
      },                                                      //请求成功回调方法
      error: function(){alert("error!")}                          //请求失败回调方法
    })
  });

</script>
</body>
<%--
一个简单的JSTL获取后台的list对象的值
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<%--<c:forEach items="${userlist}" var="item" >--%>
  <%--userId:<c:out value="${item.id}"/>--%>
  <%--<br>--%>
  <%--username:<c:out value="${item.username}"/>--%>
  <%--<br>--%>
<%--</c:forEach>--%>
</html>
